<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>


</head>

<body>
<div id="app">
  <el-container>
    <el-header title="顶栏">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               style="padding:0em 18em">

        <el-menu-item index="0">
          <el-link href="/blogo/blog/page" :underline="false">
            <img src="/static/images/logo.png" alt="" width="100px" style="float: left;">
            <span>
                                <h1 style="float: left; margin:0px;">Blogo</h1>
                            </span>
          </el-link>
        </el-menu-item>


        <el-menu-item index="1">
          <el-link>时间轴</el-link>
        </el-menu-item>
        <el-menu-item index="2">
          <el-link>档案</el-link>
        </el-menu-item>
        <el-menu-item index="3">
          <el-link>友链</el-link>
        </el-menu-item>
        <el-menu-item index="4">
          <el-link>关于</el-link>
        </el-menu-item>
      </el-menu>
      <div class="line"></div>
    </el-header>
    <el-container style="margin-top: 1em;" :span="20">
<!--      <el-aside :span="3" title="目录">-->
<!--        <h1>目录</h1>-->
<!--        <el-tree :data="content" :default-expanded-keys="[1]" node-key="id" :props="defaultProps"-->
<!--                 @node-click="handleNodeClick"></el-tree>-->
<!--      </el-aside>-->
      <el-main>
        <el-container>
          <el-main title="博客详细内容">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <h2>${blog_title}</h2>
                <span>作者：${author}</span>
                <span>创作时间： ${create_time}</span>
                <span style="margin: 0px 10px;">
                                        <el-badge :value="views" class="item">
                                            <i class="el-icon-view"></i>
                                        </el-badge>
                                    </span>


                <el-badge :value="likes" class="item" style="float: right;">
                  <el-button @click="handleLikes(btn_active)" icon="el-icon-thumb" size="mini" :type="btn_active" title="点赞" round>
                    点赞</el-button>
                </el-badge>

              </div>
              <el-image :src="url" fit="contain"></el-image>
              <!-- <div v-for="p in blog" :key="p" class="text item">
                  <div style="margin: 20px 0px;"></div>${'列表内容' + p}
              </div>
           -->
              <div class="text item" v-html="blog_content">

              </div>


</el-card>
</el-main>
<!-- <el-footer title="跳转其他文章">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <el-link>上一篇博客</el-link>
                            </el-col>
                            <el-col :span="16">
                                <div class="grid-content bg-purple"></div>
                            </el-col>
                            <el-col :span="4">
                                <el-link>下一篇博客</el-link>
                            </el-col>
                        </el-row>
                    </el-footer> -->
</el-container>
</el-main>
</el-container>

<el-footer title="网站基本信息">
  <hr>
  <div>
    <el-descriptions title="网站基本信息" style="margin: 0px auto;width: 1024px;">
      <el-descriptions-item label="用户名">梁超</el-descriptions-item>
    </el-descriptions>
  </div>

</el-footer>

</el-container>

</div>





</body>
<!-- <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> -->
<!-- import Vue before Element -->
<script src="/static/js/Vue.js"></script>
<!-- import JavaScript -->
<script src="/static/js/index.js"></script>
<script src="/static/js/marked.min.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>
  let main = new Vue({
    el: "#app",
    data: {
      url: "/static/images/DSC09828.jpg",
      btn_active: '',
      views: 0,
      likes: 0,
      create_time: '',
      author: '',
      content: [{
        id: 1,
        label: '一级目录1',
        children: [{
          id: 3,
          label: '二级目录1.1',
          id: 4,
          label: '二级目录1.2',
        }]
      }, {
        id: 2,
        label: '一级目录2',
        children: [{
          id: 5,
          label: '二级目录2.1',
          id: 6,
          label: '二级目录2.2'
        }],
      }
      ],
      blog_content: "",
      blog_title: "",
    },
    delimiters:['${', '}'],
    methods: {
      // TODO
      // generateContent() {
      //     import marked from '/static/js/marked'
      //     let renderer = new marked.Renderer()

      //     that = this

      //     rendererMD.heading = function (text, level, raw) {
      //         if (level < that.maxTitle) {
      //             that.maxTitle = level
      //         }
      //         anchor += 1

      //         that.toc.push(
      //             {
      //                 'id': anchor,
      //                 'tag': level,
      //                 'text': text
      //             }
      //         )

      //     }


      //     rendererMD.like = function (href, title, text) {
      //         return '<a href="' + href + '" title="' + text + '" target="_blank">' + text + '</a>';
      //     }
      // }
      getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return (false);
      },
      getBlog() {
        let blog = {}
        let url = ""
        let id = this.getQueryVariable("id")
        let create_time, author, likes, views
        $.ajax({
          url: `/blogo/blog/detail/get?id=${id}`,
          type: "get",
          async: false,
          datatype: "json",
          success: function (res) {
            blog = res.data.blog
            url = res.data.blog.blog_cover_image
          }
        })
        this.url = blog.blog_cover_image
        this.create_time = blog.create_time
        this.likes = blog.blog_likes
        this.views = blog.blog_views
        this.author = blog.author_name
        this.blog_title = blog.blog_title
        this.blog_content = marked(blog.blog_content)

      },
      handleLikes(val) {
        let id = this.getQueryVariable("id")
        if (val == '') {
          this.btn_active = 'primary'
          this.likes += 1
          $.ajax({
            url: `/blogo/blog/update/likes/add?id=${id}`,
            type: "put",
            async: false,
            datatype: "json",
            success: function (res) {
              if (res !== null && res.code === 200) {

              }
            }
          })
        } else {
          this.btn_active = ''
          this.likes -= 1
          $.ajax({
            url: `/blogo/blog/update/likes/sub?id=${id}`,
            type: "put",
            async: false,
            datatype: "json",
            success: function (res) {
              if (res !== null && res.code === 200) {

              }
            }
          })
        }
      },
      changeviews(){
        let id = this.getQueryVariable("id")
        let views = 0
        this.views = this.views + 1
        $.ajax({
          url: `/blogo/blog/update/views/add?id=${id}`,
          type: "put",
          async: false,
          datatype: "json",
          success: function(res) {
            views = res.data.blog_views
          }
        })
        this.views = views;

      },
    },
    created: function() {
      this.getBlog()
      this.changeviews()
    },
  })

</script>


</html>